<!--
 * @Author: zj
 * @LastEditors: JESS
 * @Date: 2022-06-14 15:41:42
 * @LastEditTime: 2022-08-03 14:04:03
-->
<template>
  <div class="congestion-content content-border-bg content-fade-bottom">
    <div class="title-img"> <p>两个时间段道路差值对比</p> </div>
    <div class="contrast-top">
      <div class="title">道路基础信息差值</div>
      <div class="jichu">
        <div>
          <div>道路名称</div>
          <div class="jichu_bai">{{ roadName }}</div>
        </div>
        <div>
          <div>规划道路等级</div>
          <div class="jichu_bai">{{ roadInfo.ghdldj }}</div>
        </div>
        <div>
          <div>规划道路红线宽度</div>
          <div class="jichu_bai">0米</div>
        </div>
        <div>
          <div>现状道路宽度</div>
          <div class="jichu_bai">0米</div>
        </div>
        <div>
          <div>机动车道数差值</div>
          <div class="jichu_bai">0 车道</div>
        </div>
        <div>
          <div>交通大区</div>
          <div class="jichu_bai">{{ roadInfo.jtdq }}</div>
        </div>
      </div>
    </div>
    <div class="contrast-top">
      <div class="title">拥堵信息差值</div>
      <!-- <div class="zhuzb">主指标</div> -->
      <div >
        <!-- <div style="width: 25%; color: #fff">
          <img
            src="@/assets/images/basic/rat_icon.png"
            alt=""
            style="float: left; width: 52px; height: 52px; margin-right: 20px"
          />
          <div style="font-size: 14px; color: #d9dbde">拥堵评级</div>
          <p style="font-size: 22px"> 重度拥堵 </p>
        </div>
        <div style="width: 25%; color: #fff">
          <img
            src="@/assets/images/basic/time_icon.png"
            alt=""
            style="float: left; width: 52px; height: 52px; margin-right: 20px"
          />
          <div style="font-size: 14px; color: #d9dbde">车均延误</div>
          <p style="font-size: 22px"> 232S </p>
        </div> -->
        <!-- <div class="zhuzb" style="position: absolute; right: 251px; bottom: 290px">指标及速度</div> -->
        <div class="zhibiao" style="width: 100%">
          <div class="item_3">
            <div>拥堵指数</div>
            <div class="jichu_bai">{{ avg.avgCongestIndex }}</div>
          </div>
          <div class="item_3">
            <div>平均速度</div>
            <div class="jichu_bai">{{ avg.avgCongestSpeed }}km/h</div>
          </div>
          <div class="item_3">
            <div>自由流速度</div>
            <div class="jichu_bai">{{ avg.avgCongestSpeed }}km/h</div>
          </div>
        </div>
        <div class="zhibiao" style="width: 100%">
          <div class="item_3">
            <div>拥堵里程</div>
            <div class="jichu_bai">{{ avg.avgCongestLength }}km</div>
          </div>
          <div class="item_3">
            <div>平均拥堵指数</div>
            <div class="jichu_bai">{{ avg.nowAvgCongestIndex }}</div>
          </div>
          <div class="item_3">
            <div>平均拥堵里程</div>
            <div class="jichu_bai">{{ avg.nowAvgCongestLength }}km</div>
          </div>
        </div>
      </div>

      <!-- <div class="zhuzb">排队及拥堵</div>
      <div class="zhibiao">
        <div>
          <div>路口排队长度差值</div>
          <div class="jichu_bai">0</div>
        </div>
        <div>
          <div>路口拥堵里程差值</div>
          <div class="jichu_bai">0</div>
        </div>
        <div>
          <div>路口治堵占比差值</div>
          <div class="jichu_bai">48.4km/h</div>
        </div>
      </div>
      <div class="zhuzb">停车指标</div>
      <div class="zhibiao">
        <div>
          <div>停车次数</div>
          <div class="jichu_bai">0.34次</div>
        </div>
        <div>
          <div>停车率</div>
          <div class="jichu_bai">27%</div>
        </div>
        <div>
          <div>停车延误</div>
          <div class="jichu_bai">5.86s</div>
        </div>
        <div>
          <div>1次停车率</div>
          <div class="jichu_bai">60%</div>
        </div>
        <div>
          <div>2次停车率</div>
          <div class="jichu_bai">27%</div>
        </div>
        <div>
          <div>3次停车率</div>
          <div class="jichu_bai">11%</div>
        </div>
      </div> -->
    </div>
  </div>
</template>

<script>
  import { defineComponent, reactive, toRefs } from 'vue';
  import customDatePicker from '@/components/customDatePicker';
  export default defineComponent({
    // eslint-disable-next-line vue/no-unused-components
    components: { customDatePicker },

    setup() {
      const state = reactive({
        roadName: '',
        roadInfo: {},
        avg: {},
      });
      return {
        ...toRefs(state),
      };
    },
  });
</script>

<style scoped lang="less">
  .congestion-content {
    position: absolute;
    z-index: 3;
    right: 26%;
    width: 47%;
    height: 45%;
    top: 54%;
  }
  .contrast-top {
    width: 100%;
    background: url(@/assets/images/basic/roadInfo.png) no-repeat;
    .title {
      font-size: 16px;
      margin-left: 21px;
      font-family: YouSheBiaoTiHei;
      font-weight: 400;
      margin-top: 10px;
      color: #ffffff;
      line-height: 18px;
      text-shadow: 0px 0px 6px #1fa3ff;
    }
    .jichu {
      margin-top: 10px;
      color: #67a8f5;
      font-size: 14px;
      display: flex;
      justify-content: space-between;
      width: 100%;
      div {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
    }
    .zhibiao {
      margin-top: 10px;
      color: #d9dbde;
      font-size: 14px;
      display: flex;
      div {
        margin-top: 10px;
        display: flex;
        width: 29%;
        flex-direction: column;
        align-items: center;

        &.item_3 {
          width: 33.333%;
          div{
            width: 100%;
          }
        }
      }
    }
  }
  .zhuzb {
    font-size: 16px;
    color: #fff;
    margin: 10px 0;
    width: 200px;
    border-left: 1px solid #62abff;
  }
  .title-img {
    width: 400px;
    height: 50px;
    background-size: 108% 100%;
    background: url(@/assets/images/组\ 102.png) no-repeat;
    p {
      padding-top: 11px;
      padding-left: 5px;
      font-size: 20px;
      margin-left: 21px;
      font-family: YouSheBiaoTiHei;
      font-weight: 400;
      color: #ffffff;
      line-height: 18px;
      text-shadow: 0px 0px 6px #1fa3ff;
    }
  }
  #container {
    position: relative;
    left: -50px;
    width: 400px;
    height: 200px;
  }
  :deep .el-table__inner-wrapper::before {
    background-color: transparent !important;
  }
  :deep .el-input__wrapper {
    background: transparent !important;
    color: white;
  }
  :deep .el-input__wrapper {
    background-color: #ffffff00;
    box-shadow: 0px 0px 0px;
  }
  :deep .el-select {
    --el-select-border-color-hover: none;
    --el-select-input-focus-border-color: none;
  }
  .mymap-container {
    color: white;
  }
  :deep .el-table,
  .el-table__expanded-cell {
    background-color: transparent;
    color: #fff;
  }

  .el-table::before {
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0px;
  }

  :deep .el-table tr {
    background-color: transparent !important;
  }

  :deep .el-table tr:hover > td {
    background-color: transparent !important;
  }

  :deep .el-table th {
    background-color: transparent !important;
    border-bottom: none !important;
    color: #fff;
  }

  :deep .el-table--enable-row-transition .el-table__body td,
  .el-table .cell {
    background-color: transparent;
    border-bottom: none !important;
  }
</style>
